Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@uiw/react-icon

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@uiw/react-icon

Icon component

4.22.3
latest
Source
npm

Version published: last year

Weekly downloads: 392; increased by51.94%

Maintainers: 2

Weekly downloads

Created: 5 years ago

Source

Icon 图标

语义化的矢量图形，内置的图标属于UI框架常用图形字体。icon字体以及样式，被抽离到一个新的仓库 uiw icon ，uiw去依赖 uiw-iconfont，这个仓库主要是维护一套svg图片，并将svg图片转换为 *.symbol.svg *.ttf *.woff *.woff2 *.eot svgPaths.json 等字体及相关文件并发布到 npm 上去。

import { Icon } from 'uiw';
// or
import Icon from '@uiw/react-icon';

搜索图标

import React from 'react';
import { Input, CopyToClipboard, Icon, Notify } from 'uiw';

const icons = ["adobe", "alipay", "aliwangwang", "android-o", "android", "apple", "appstore-o", "appstore", "area-chart", "down", "left", "right", "up", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "arrows-alt", "asterisk", "backward", "baidu", "bar-chart", "barcode", "bell", "camera-o", "caret-down", "caret-left", "caret-right", "caret-up", "check-square-o", "check-square", "check", "chrome", "circle-check-o", "circle-check", "circle-close-o", "circle-close", "close-square-o", "close-square", "close", "cloud-download-o", "cloud-download", "cloud-upload-o", "cloud-upload", "coffee", "component", "copy", "copyright", "css3", "cut", "d-arrow-left", "d-arrow-right", "d-caret", "dashboard", "date", "delete", "dingding", "dislike-o", "document", "dot-chart", "circle-o", "down-circle-o", "down-circle", "down-square-o", "down-square", "square-o", "download", "edit", "enter", "environment-o", "environment", "eye-o", "eye", "facebook", "file-add", "file-excel", "file-jpg", "file-pdf", "file-text", "file-unknown", "filter", "firefox", "folder-add", "folder-open", "folder", "forward", "foursquare", "frown-o", "frown", "github-o", "github", "global", "heart-off", "heart-on", "home", "html5", "ie", "inbox", "information-o", "information", "laptop", "left-circle-o", "left-circle", "left-square-o", "left-square", "like-o", "link", "linkedin", "linux", "loading", "lock", "login", "logout", "man", "map", "meh-o", "meh", "menu-fold", "menu-unfold", "menu", "mail", "mail-o", "message", "minus-circle-o", "minus-circle", "minus-square-o", "minus-square", "minus", "mobile", "more", "notification", "opera", "paper-clip", "pause-circle-o", "pause-circle", "pause", "pay-circle-o", "pay", "picasa", "picture", "pie-chart", "pinterest", "play-circle-o", "play-circle", "plus-circle-o", "plus-circle", "plus-square-o", "plus-square", "plus", "poweroff", "printer", "qq", "qrcode", "question-circle-o", "question-circle", "reddit", "reload", "right-circle-o", "right-circle", "right-square-o", "right-square", "rollback", "safari", "safety", "save", "search", "setting-o", "setting", "share", "shopping-cart", "shrink", "smile-o", "smile", "star-off", "star-on", "swap-left", "swap-right", "swap", "table", "tag-o", "tag", "tags-o", "tags", "taobao", "time-o", "time", "twitter", "uiw", "unlock", "up-circle-o", "up-circle", "up-square-o", "up-square", "upload", "user-add", "user-delete", "user", "usergroup-add", "usergroup-delete", "verification", "verticle-left", "verticle-right", "video-camera", "warning-o", "warning", "weibo", "weixin", "wifi", "windows", "woman", "zoom-in", "zoom-out", 'stop-o', 'stop'];
const itemStyl = {
  fontSize: 26, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',
  display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', justifyContent: 'center', fill: '#525252',
}
class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      len: 0,
      result: [],
    }
  }
  onChange(env) {
    const value = env.target.value;
    const data = value ? icons.filter((item) => item.indexOf(value) > -1) : [];
    const len = data.length;
    const result = data.splice(0, 15);
    this.setState({ len, result });
  }
  render() {
    const { len, result } = this.state;
    return (
      <div>
        <Input preIcon="search" placeholder="请输入图标名称" type="text" style={{ maxWidth: 200 }} onChange={this.onChange.bind(this)} />
        <div style={{ padding: '10px 0' }}>
          搜索到 {this.state.len} 个结果{len > 0 && <span>，下面展示 {len > 15 ? '15' : len} 个图标，可以点击复制图标代码: </span>}
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
          {result.map((type, idx) => {
            const iconTxt = `<Icon type="${type}" />`;
            return (
              <CopyToClipboard
                key={idx}
                style={itemStyl}
                text={iconTxt}
                onClick={() => {
                  Notify.success({
                    title: '你已复制内容！',
                    description: (
                      <span>
                        已复制 <b style={{ color: 'red' }}>{iconTxt}</b> 可以去粘贴了！
                      </span>
                    ),
                  });
                }}
              >
                <div key={idx}>
                  <Icon type={type} />
                  <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>
                </div>
              </CopyToClipboard>
            )
          })}
        </div>
      </div>
    );
  }
}

export default Demo;

如何使用

使用<Icon />组件，指定图标对应的type属性，示例代码：

import { Icon } from 'uiw';

<Icon type="minus" />

渲染为

<span class="w-icon w-icon-middle">
  <svg viewBox="0 0 24 24">
    <path d="M16.038 3.176c2.313-.551 4.58.248 5.648 1.603.985 1.25 1.433 2.55 1.287 4.468-.105 1.383-.55 2.408-1.428 3.536-.162.208-.34.421-.563.68-.13.153-.628.72-.602.692-.88 1.008-3.471 3.535-7.814 7.62a.83.83 0 0 1-1.139-.003c-3.728-3.55-6.141-5.888-7.248-7.022-2.043-2.094-2.82-3.31-3.102-5.276-.295-2.055.27-3.742 1.538-5.053 1.19-1.229 3.319-1.684 5.42-1.25 1.231.254 2.542 1.072 3.961 2.436 1.21-1.261 2.56-2.077 4.042-2.43z" fill-rule="evenodd">
    </path>
  </svg>
</span>

示例如下:

const Demo = () => (
  <div>
    <Icon type="arrow-down" />
    <Icon type="minus" />
    <Icon type="plus" />
    <Icon type="check" />
    <Icon type="close" />
  </div>
)

import React from 'react';
import { Icon } from 'uiw';

export default function Demo() {
  return (
    <div style={{ fontSize: 18, lineHeight: '12px' }}>
      <Icon type="heart-on" />
      <Icon type="pie-chart" />
      <Icon type="tag" />
    </div>
  );
}

图标尺寸

默认情况下，图标非常小，它们继承了父级的字体大小。如果没有设置字体大小，可以通过 size 来设置尺寸。通常情况 size 会很累赘没有什么用。

import React from 'react';
import { Icon } from 'uiw';

export default function Demo() {
  return (
    <div style={{ fontSize: '28px' }}>
      <Icon type="heart-on" />
      <Icon type="pie-chart" />
      <Icon type="tag" />
    </div>
  );
}

图标颜色

默认纯黑色图标，当前图标是 svg 格式展示，在为SVG设置样式时，请使用 fill 或 stroke 属性而不是 color。这些可以直接在 Icon 上设置为 style 或通过 CSS 设置。

一个有用的技巧是将 fill 设置为 currentColor，以便从图标容器的文本颜色继承填充颜色。

import React from 'react';
import { Icon } from 'uiw';

export default function Demo() {
  return (
    <div style={{ fontSize: '28px',color: 'green' }}>
      <Icon type="apple" color="red" />
      <Icon type="pie-chart" style={{fill: 'currentColor'}} />
      <Icon type="frown" style={{fill: 'blue'}} />
      <Icon type="uiw" style={{stroke: 'red',fill: '#ffef00'}} />
    </div>
  );
}

与文本对齐

import React from 'react';
import { Icon } from 'uiw';

export default function Demo() {
  return (
    <div>
      <h3 style={{ margin: 0 }}>Exit <Icon verticalAlign="baseline" type="baidu" /></h3>
      <span>uiw</span><Icon type="uiw" verticalAlign="baseline" style={{ fill: '#009688', fontSize: 21 }} />
    </div>
  );
}

图标的命名规范

我们为每个图标赋予了语义化的命名，命名规则如下:

[形状?]-[图标名]-[描线?]-[方向?]
方向：down、up、left、right
描线：-o 图标添加边框描线
默认：w-icon- 默认引用的字体文件作用域
自定定义：w-icon-uiw- 自定定义作用域

import React from 'react';
import { Icon } from 'uiw';

export default function Demo() {
  return (
    <div>
      <Icon type="circle-close" verticalAlign="baseline" />  图标名称：circle-close，[circle圈]-[关闭close]
      <br/>
      <Icon type="circle-close-o" verticalAlign="baseline" /> 图标名称：circle-close-o，[circle圈]-[关闭close]-[o描线]
    </div>
  );
}

图标旋转实例

通过设置参数 spin={true} 来设置图标旋转。

import React from 'react';
import { Icon } from 'uiw';

export default function Demo() {
  return (
    <div style={{ fontSize: 21, color: 'green' }}>
      <Icon type="loading" spin={true} color="red" />
      <Icon type="reload" spin={true} />
      <Icon type="picasa" spin={true} style={{fill: 'blue'}} />
      <Icon type="smile-o" spin={true} style={{fill: 'blue'}} />
    </div>
  );
}

自定义图标

import React from 'react';
import { Icon } from 'uiw';

const chat = (
  <svg width="20" height="20" viewBox="0 0 20 20">
    <path d="M19 0H7c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h5.59l3.71 3.71c.17.18.42.29.7.29.55 0 1-.45 1-1v-3h1c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zM7 13c-1.1 0-2-.9-2-2V4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h1v3a1.003 1.003 0 0 0 1.71.71L7.41 16H13c.55 0 1-.45 1-1v-.17L12.17 13H7z" fillRule="evenodd" />
  </svg>
)
const contrast = (
  <svg width="20" height="20" viewBox="0 0 20 20">
    <path d="M19 8h-1.26c-.19-.73-.48-1.42-.85-2.06l.94-.94a.996.996 0 0 0 0-1.41l-1.41-1.41a.996.996 0 0 0-1.41 0l-.94.94c-.65-.38-1.34-.67-2.07-.86V1c0-.55-.45-1-1-1H9c-.55 0-1 .45-1 1v1.26c-.76.2-1.47.5-2.13.89L5 2.28a.972.972 0 0 0-1.36 0L2.28 3.64c-.37.38-.37.98 0 1.36l.87.87c-.39.66-.69 1.37-.89 2.13H1c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h1.26c.19.73.48 1.42.85 2.06l-.94.94a.996.996 0 0 0 0 1.41l1.41 1.41c.39.39 1.02.39 1.41 0l.94-.94c.64.38 1.33.66 2.06.85V19c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1.26c.76-.2 1.47-.5 2.13-.89l.88.87c.37.37.98.37 1.36 0l1.36-1.36c.37-.38.37-.98 0-1.36l-.87-.87c.4-.65.7-1.37.89-2.13H19c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-9 7c-2.76 0-5-2.24-5-5s2.24-5 5-5v10z" fillRule="evenodd" />
  </svg>
)
const styl = { marginRight: 10 };

export default function Demo() {
  return (
    <div style={{ fontSize: 21, color: 'green' }}>
      <Icon style={styl} type={chat} color="red" />
      <Icon style={styl} type={contrast} spin={true} />
    </div>
  );
}

字体图标

通过引入 uiw-iconfont 字体样式，在 uiw-iconfont官网找到对应的图标名称，就可以使用了，uiw 已经依赖 uiw-iconfont 你无需安装即可使用，更多使用方法查看官方文档。

# 如果你没有安装，可单独使用，安装
npm i uiw-iconfont --save

引入字体样式

import 'uiw-iconfont/fonts/w-icon.css';

在 HTML 中使用：

<i className="w-icon-apple"></i>

在 React 中使用：

const Demo = () => (
  <div style={{ color: 'green' }}>
    <i className="w-icon-apple" />
    <i className="w-icon-appstore" />
  </div>
)

API

参数	说明	类型	默认值
type	图标的名称	String/ReactNode	-
spin	是否有旋转动画	Boolean	`false`
verticalAlign	垂直对齐方式	Enum {baseline, middle}	`baseline`
style	设置图标的样式，例如 `fill` 和 `stroke`	Object	-

所有图标

方向性图标

import React from 'react';
import { Icon } from 'uiw';

const iconList = [
  'circle-o', 'down-square-o','down-square','up-square-o', 'up-square','left-square-o','left-square', 'right-square-o', 'right-square',
]
const itemStyl = {
  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',
  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',
}

export default function Demo() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
      {iconList.map((type, idx) => {
        return (
          <div key={idx} style={itemStyl}>
            <Icon type={type} />
            <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>
          </div>
        )
      })}
    </div>
  );
}

圆圈方向性图标

import React from 'react';
import { Icon } from 'uiw';

const iconList = [
  'square-o', 'down-circle-o', 'down-circle','up-circle-o','up-circle','left-circle-o', 'left-circle','right-circle-o', 'right-circle','play-circle-o',  'play-circle',
]
const itemStyl = {
  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',
  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',
}

export default function Demo() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
      {iconList.map((type, idx) => {
        return (
          <div key={idx} style={itemStyl}>
            <Icon type={type} />
            <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>
          </div>
        )
      })}
    </div>
  );
}

其它方向性图标

import React from 'react';
import { Icon } from 'uiw';

const iconList = [
  'down', 'up', 'left', 'right', 'caret-down', 'caret-up', 'caret-left', 'caret-right', 'arrow-down', 'arrow-up', 'arrow-left', 'arrow-right',
  'shrink','arrows-alt','d-arrow-left','d-arrow-right','enter',
  'rollback', 'd-caret','backward','forward',  'logout', 'login', 'swap-left', 'swap-right', 'swap',
  'verticle-left', 'verticle-right', 'menu','menu-fold', 'menu-unfold',
]
const itemStyl = {
  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',
  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',
}

export default function Demo() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
      {iconList.map((type, idx) => {
        return (
          <div key={idx} style={itemStyl}>
            <Icon type={type} />
            <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>
          </div>
        )
      })}
    </div>
  );
}

提示建议性图标

import React from 'react';
import { Icon } from 'uiw';

const iconList = [
  'smile-o', 'smile','frown-o', 'frown', 'meh-o', 'meh', 
  'pause-circle-o', 'pause', 'pause-circle', 'information-o', 'information', 'warning-o', 'warning',
  'question-circle-o', 'question-circle', 'stop-o', 'stop',
];
const itemStyl = {
  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',
  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',
}

export default function Demo() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
      {iconList.map((type, idx) => {
        return (
          <div key={idx} style={itemStyl}>
            <Icon type={type} />
            <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>
          </div>
        )
      })}
    </div>
  );
}

符号

import React from 'react';
import { Icon } from 'uiw';

const iconList = [
 'plus', 'plus-circle-o','plus-circle', 'plus-square', 'plus-square-o',
 'minus', 'minus-circle-o', 'minus-circle', 'minus-square', 'minus-square-o', 
 'close','circle-close-o', 'circle-close','close-square', 'close-square-o', 'asterisk',
  'check', 'circle-check-o', 'circle-check','check-square','check-square-o', 'copyright',
]
const itemStyl = {
  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',
  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',
}

export default function Demo() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
      {iconList.map((type, idx) => {
        return (
          <div key={idx} style={itemStyl}>
            <Icon type={type} />
            <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>
          </div>
        )
      })}
    </div>
  );
}

文件

import React from 'react';
import { Icon } from 'uiw';

const iconList = [
  'file-text', 'file-jpg', 'file-unknown', 'file-add', 'file-excel', 'file-pdf',
  'folder-add', 'folder-open', 'paper-clip', 
]
const itemStyl = {
  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',
  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',
}

export default function Demo() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
      {iconList.map((type, idx) => {
        return (
          <div key={idx} style={itemStyl}>
            <Icon type={type} />
            <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>
          </div>
        )
      })}
    </div>
  );
}

其它

import React from 'react';
import { Icon } from 'uiw';

const iconList = [
  'heart-off', 'heart-on', 'star-on', 'star-off','lock', 'unlock','dashboard',
  'area-chart', 'bar-chart', 'dot-chart','pie-chart',
  'dislike-o', 'like-o','loading', 'reload','appstore', 'appstore-o',
  'tag', 'tag-o','tags','tags-o', 'setting','setting-o','map','table','qrcode','barcode','printer',
  'cloud-upload','cloud-upload-o', 'cloud-download','cloud-download-o', 'download','message', 'mail', 'mail-o',
  'user', 'user-add', 'user-delete', 'usergroup-add', 'usergroup-delete', 'zoom-in', 'zoom-out','time', 'time-o',
  'bell', 'camera-o', 'coffee', 'document', 'delete', 'date', 'edit',  'eye-o', 'environment-o', 'filter', 'global', 'inbox', 'home', 'laptop', 'link', 'copy', 'more', 'shopping-cart', 'search', 'save', 'safety', 'poweroff', 'picasa', 'notification',
  'pay-circle-o', 'pay', 'picture', 'woman', 'man', 'verification', 'wifi', 'video-camera', 'mobile'
]
const itemStyl = {
  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',
  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',
}

export default function Demo() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
      {iconList.map((type, idx) => {
        return (
          <div key={idx} style={itemStyl}>
            <Icon type={type} />
            <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>
          </div>
        )
      })}
    </div>
  );
}

品牌标识

import React from 'react';
import { Icon } from 'uiw';

const iconList = ['uiw', 'windows', 'linux', 'apple', 'facebook', 'twitter', 'adobe', 'baidu', 'alipay', 'android-o', 'android','reddit', 'github', 'github-o', 'aliwangwang',   'dingding', 'foursquare', 'linkedin', 'pinterest', 'qq',  'weibo', 'taobao', 'weixin', 'css3', 'html5'];

const itemStyl = {
  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',
  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',
}

export default function Demo() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
      {iconList.map((type, idx) => {
        return (
          <div key={idx} style={itemStyl}>
            <Icon type={type} />
            <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>
          </div>
        )
      })}
    </div>
  );
}

浏览器图标

import React from 'react';
import { Icon } from 'uiw';

const iconList = [ "chrome", "safari", "firefox", "opera", "ie", ];
const itemStyl = {
  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',
  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',
}

export default function Demo() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
      {iconList.map((type, idx) => {
        return (
          <div key={idx} style={itemStyl}>
            <Icon type={type} />
            <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>
          </div>
        )
      })}
    </div>
  );
}

Keywords

FAQs

What is @uiw/react-icon?

Is @uiw/react-icon popular?

Is @uiw/react-icon well maintained?

Package last updated on 29 Nov 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@uiw/react-icon

Icon 图标

搜索图标

如何使用

图标尺寸

图标颜色

与文本对齐

图标的命名规范

图标旋转实例

自定义图标

字体图标

API

所有图标

方向性图标

提示建议性图标

符号

文件

其它

品牌标识

浏览器图标

Keywords

Related posts

Weekly Downloads Now Available in npm Package Search Results

Tech's $90B Ghost Engineer Problem: Stanford Study Finds 9.5% of Engineers Do Almost Nothing